<script setup lang="ts">
import { ref, watchEffect } from "vue";
import "vant/es/toast/style";
import { showToast } from "vant";
import { matchUser, recommendUser } from "@/services/userService";
import UserCardList from "@/components/UserCardList.vue";

let userList = ref(null);
let res = ref(null);
let model = ref(false);

//监视模式
watchEffect(async () => {
  res.value = null;
  userList.value = null;
  if (model.value) {
    //心动模式
    res.value = await matchUser(10);
    const { data, message, description } = res.value;
    if (data) {
      userList.value = data;
    } else {
      showToast(description.length ? description : message);
    }
  } else {
    //默认
    res.value = await recommendUser(0, 10);
    const { data, message, description } = res.value;
    if (data) {
      userList.value = data;
    } else {
      showToast(description.length ? description : message);
    }
  }
});
</script>

<template>
  <van-empty description="数据为空" v-if="userList?.length === 0" />
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="model" />
    </template>
  </van-cell>
  <van-loading
    color="#1989fa"
    v-if="res === null"
    size="40px"
    style="text-align: center; line-height: 100px"
  />
  <user-card-list :user-list="userList ?? []" />
</template>

<style scoped></style>
